<template>
    <view class="icon-components-container">
		<scroll-view scroll-y="true" style="height: 900rpx;width: 100%;">
			<view class="icon-item-container" v-for="(item, index) in iconCategorysList" :key="index">
				<view class="icon-item-title">{{item.name}}</view>
				<!-- 每个分类父盒子 -->
				<view class="icon-item-content-container">
					<!-- 每个图标父盒子 -->
					<view class="item-container" v-for="(item1, index1) in item.list" :key="index1" @click="selectIcon(index, index1)">
						<!-- 圆背景盒子 -->
						<view :class="['icon-bgc-container', {'selected-icon': index1 == iconIndex && categoryIndex == index}, {'not-selected-icon': !(index1 == iconIndex && categoryIndex == index)}]">
							<!-- 每个图标 -->
							<view :class="['item-icon', 'iconfont', item1.icon ]"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
    export default {
		props: {
			categoryIndex: {																	// 图标分类索引
				type: Number,
				default: -1,
			},		
			iconIndex: {																		// 某分类图标集合下的图标索引位置
				type: Number,
				default: -1,
			},
		},
        data() {
            return {
				selectColorIndex: 0,														// 测试使用，一开始选中的颜色
				isShowColor: false,															// 展示颜色选择组件
				iconCategorysList: this.iconCategoryList,									// 所有的图标
				bgcColor: this.themeYellowColor,
            }
        },
		methods: {
			/** 选择图标函数
			 * @param {Object} index 分类索引
			 * @param {Object} iconIndex 分类下图标集合的图标索引
			 */
			selectIcon(index, iconIndex) {
				this.$emit("selectIcon", index, iconIndex);
			}
		},
		mounted() {
		},
    }
</script>

<style lang="scss">
	// 上面的 x 和 标题 
	.icon-components-container {
		width: 670rpx;
		min-height: 270rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		
		// 每个图标分类的大盒子
		.icon-item-container {
			width: 100%;
			min-height: 100rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			
			// 分类的标题
			.icon-item-title {
				width: 100%;
				height: 60rpx;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: $themePurpleColor;
			}
			
			// 每个分类下的图标的大盒子
			.icon-item-content-container {
				flex: 1;
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 20rpx;
				
				// 每个图标父盒子
				.item-container {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					// 圆背景盒子
					.icon-bgc-container {
						width: 72rpx;
						height: 70rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						
						// 每个图标
						.item-icon {
							font-size: 40rpx;

						}
					}
				}
			}
		}
	}
	
	.selected-icon {
		background-color: $themeYellowColor;
		color: white;
	}
	
	.not-selected-icon {
		background-color: $themeLightGreyColor;
		color: $themeDeepGreyColor;
	}
</style>
